// 子组件---》父组件

import React from 'react'
import ReactDOM from 'react-dom'


// 父组件
class Parent extends React.Component {
    state = {
        parentMsg: ''
    }
    // 创建一个函数传递给子组件
    getChildMsg = data => {
        console.log("从子组件中获取过来的值", data);
        this.setState({
            parentMsg: data
        })
    }
    render() {
        return (
            <div>
                父组件:{this.state.parentMsg}
                <Child getMsg={this.getChildMsg} />
            </div>
        )
    }
}
// 子组件
class Child extends React.Component {
    state = {
        childMsg: 'React'
    }
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        // 将要传递的值作为参数传递给父组件
        this.props.getMsg(this.state.childMsg)
    }

    render() {
        return (
            <div>
                子组件：<button onClick={this.handleClick}>点我，给父组件传递数据</button>
            </div>
        )
    }
}
ReactDOM.render(<Parent />, document.getElementById('root'))